var React = require('react');
var createReactClass = require('create-react-class');
var api = require('./api.js');
var ContactList = createReactClass({
    getInitialState: function() {
        return {
            act:false
        };
    },

    onClick: function(uid, e) {
        this.props.onContactClick(uid);
    },
    onGroupClick:function(gid,e){
        this.props.onGroupClick(gid);
    },
    onSystemClick:function(system){
        this.props.onSystemClick(system)
    },
    notAgree:function(system){
        var states=0;
        this.props.onSystemClick(system,states)
    },
    Agree:function(system){
        var states=1;
        this.props.onSystemClick(system,states)
    },
    render: function() {
        var nodes = [];
        var nodeGroups = [];
        var systems=[];
        var users = this.props.contacts;
        var groups = this.props.contactsGroups;
        var system = this.props.systemMessage;
        // console.log("groups:", groups);
        // console.log("users:", users);
        console.log("system"+system)
        if(system != undefined){
            if(system.action == "ADD_FRIEND_REQUEST"){
                if(system.new_friends.source_user.portrait){
                    var img=system.new_friends.source_user.portrait
                }else{
                    var img="images/_avatar.png"
                }
                var s=(
                    <div 
                    style={{padding:"14px 15px 12px 13px "}}
                    key={system.new_friends.id}>
                        <img src={img} className="avatar" style={{width:'48px',borderRadius:"4px"}} alt=""/>
                        <span>{system.new_friends.source_user.nickname}申请加你为好友</span>
                        <p>验证消息:{system.new_friends.message}</p>
                        <button style={{marginLeft:"70px"}} onClick={this.notAgree.bind(this, system)}>忽略</button> 
                        <button style={{marginLeft:"25px"}} onClick={this.Agree.bind(this, system)}>同意</button>
                    </div>
                )
                systems.push(s);
            }
        }else{
            var s=(
                <div style={{padding:"14px 15px 12px 13px "}}>
                    <p>无系统消息</p>
                </div>
            )
            systems.push(s);
        }
        
        for (var i in users) {
            var user = users[i];

            var className = "name";
            var name = user.name;
            var avatar = user.avatar ? user.avatar : "images/_avatar.png";
            if (!name) {
                className = "uid";
                name = "" + user.uid;
            }

            var active = user.active;

            var t = (
                <li className={active?"active":""} onClick={this.onClick.bind(this, user.uid)}
                    data-uid={user.uid}
                    key={user.uid}>
                    <img src={avatar} className="avatar" alt=""/>
                    <span className={className}>{name}</span>
                    <span className="num">{user.num||''}</span>
                </li>
            );
            nodes.push(t);
        }
        for (var j=0;j<groups.length;j++){
            // var groups = groups[j];
            var avatar = groups[j].portrait ? groups[j].portrait : "images/avatar_group.png";
            var name=groups[j].name;
            if (!name) {
                className = "id";
                name = "" + groups[j].id;
            }
            // var active = groups[j].active;
            var g=(
                <li onClick={this.onGroupClick.bind(this, groups[j].id)}
                    data-uid={groups.id}
                    key={groups[j].id}>
                    <img src={avatar} className="avatar" alt=""/>
                    <span className={className}>{name}</span>
                    {/* <span className="num">{user.num||''}</span> */}
                </li>
            )
            nodeGroups.push(g)
        }
        return (
            <div className="contact-list">
            {/* <ul id="systemList"> */}
                <p className="" style={{textAlign:"center"}}>系统通知</p>
                {systems}
            {/* </ul> */}
            <ul id="groupList">
            <p className="" style={{textAlign:"center"}}>群组</p>
                {nodeGroups}
            </ul>
            <ul id="usersList">
            <p className="" style={{textAlign:"center"}}>好友</p>
                {nodes}
            </ul>
            
        </div>
        );
    }
});


module.exports = ContactList;
